<template>
  <div class="dosage-statistical-container">
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          ></AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="dosage-statistical-body" v-loading="loading">
      <VxeTableView>
        <template>
          <vxe-table
            ref="xTable"
            height="99%"
            class="scrollbarStyle"
            align="center"
            show-overflow
            show-header-overflow
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              show-overflow
              :key="index"
              :title="item.title"
              :field="item.key"
              :width="item.width"
              v-for="(item, index) in tableColumns"
            >
              <template #default="{ row }">
                <div>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
          </vxe-table>
        </template>
      </VxeTableView>
    </div>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/cement-app/AssociativeSelectGroup";
import SelectMixin from "@/components/wisdom-beam/cement-app/SelectMixin";
import SelectProjectName from "@/components/wisdom-beam/cement-app/SelectProjectName";
import SelectCastingParts from "@/components/wisdom-beam/cement-app/SelectCastingParts";
import VxeTableView from "@/components/VxeTableView";
import paginationMixins from "@/mixins/pagination";
import { usageStatisticsList } from "@/api/wisdom-beam/productionManage-app";
export default {
  components: {
    AssociativeSelectGroup,
    SelectMixin,
    SelectProjectName,
    SelectCastingParts,
    VxeTableView,
  },
  mixins: [paginationMixins],
  data() {
    return {
      loading: true,
      dateFormat: "YYYY-MM-DD HH:mm:ss",
      dataType: "statistical",
      //标段id
      orgCode: "",
      //设备id
      equCode: "",
      //项目名称
      proName: "",
      //浇筑部位
      placePart: "",
      defaultTime: [],
      tableColumns: [
        {
          title: "标段名称",
          dataIndex: "secName",
          key: "secName",
          width: "200px",
        },
        {
          title: "拌和站名称",
          dataIndex: "equName",
          key: "equName",
          width: "200px",
        },
        {
          title: "工程名称",
          dataIndex: "projectName",
          key: "projectName",
        },
        {
          title: "强度等级",
          dataIndex: "strengthGrade",
          key: "strengthGrade",
          width: "200px",
        },
        {
          title: "浇筑部位",
          dataIndex: "placePart",
          key: "placePart",
          width: "200px",
        },
        {
          title: "方量（m³）",
          dataIndex: "volume",
          key: "volume",
          width: "200px",
        },
        {
          title: "车次（辆）",
          dataIndex: "total",
          key: "total",
          width: "200px",
        },
      ],
      tableData: [],
      activeDate: [],
      conditionsData: {},
      clickFlag: false,
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
        },
        //拌和站
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择拌和站",
        },
        //工程名称
        {
          type: "engineerName",
          mode: "default",
          placeholder: "请选择工程名称",
        },
        //浇筑部位
        {
          type: "placePart",
          mode: "default",
          placeholder: "请选择浇筑部位",
        },
        //强度等级
        {
          type: "strength",
          mode: "default",
          placeholder: "请选择强度等级",
        },
        {
          type: "calendar",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //监听分页
    paginationChange(pagination) {
      let { current, pageSize } = pagination;
      this.pager.pageSize = pageSize;
      this.pager.page = current;
      this.getTableData();
    },

    //查询
    getData() {
      this.getTableData();
    },

    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        conditionsData: { block, engineerName, mixin, placePart, strength },
        defaultTime,
      } = this;
      usageStatisticsList({
        secCode: block,
        equCode: mixin,
        startTime: defaultTime[0] ?? "",
        endTime: defaultTime[1] ?? "",
        projectName: engineerName ?? "",
        placePart,
        strengthGrade: strength,
        page,
        pageSize,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.pager.total = result?.total || 0;
          this.tableData = result.records;
          this.tableData.forEach((v, i) => {
            v.id = i + "";
          });
        })
        .catch(() => {
          this.pager.total = 0;
          this.tableData = [];
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.dosage-statistical-container {
  padding: 0 0 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .dosage-statistical-body {
    flex: 1;
    overflow: hidden;
    background: #fff;
    margin: 12px 10px 0 0;
  }
}
</style>
